<template>
  <div id="">
    <button @click="change">点击：{{ message }}</button>
  </div>
</template>


<script setup lang="ts">
import { ref, watch, watchEffect } from 'vue'
let message = ref<string>('')

const change = () => {
  message.value = '阿夸'
}

// watch监听数据变化
// 可以监听多个值，需要把要监听的值放在数组里作为第一个参数传入
watch(message, (newVal, oldVal) => {
  console.log('新的', newVal);
  console.log('旧的', oldVal);
}, {
  // 第三个参数：表示需要深度监听
  deep: true
})

// watchEffect:高级监听
// 参数是一个回调函数，把需要监听的值放在里面会自动且深度监听
// 回调函数接收一个参数是一个函数，函数里面还可以传递一个回调，它会在数据监听前执行
watchEffect((onbefor) => {
  console.log('message变化了 ', message.value);
  onbefor(() => {
    console.log('数据监听之前');
  })
}, {
  // 第二个参数是一个配置项
  // pre组件更新前执行，sync强制效果始终同步触发，post组件更新后执行
  flush: 'post'
})
</script>

<style lang="less">
</style>
